<template>
	<view>
		<view class="page">
			<comp-common v-bind="{data:data}" @getUserInfo="getUserInfo" @myLogin="myLogin" @getPhoneNumber="getPhoneNumber" @hideGetCoupon="hideGetCoupon" @closeCouponBox="closeCouponBox" @navigatorClick="navigatorClick"></comp-common>
			<comp-header v-bind="{data:data}" @relevanceError="relevanceError" @relevanceSuccess="relevanceSuccess"></comp-header>
			<view class="body after-navber">
				<view class="order-address">
            <view class="user-info flex-row">
                <view class="user-info-name flex-grow-1">
                    {{data.order_info.is_offline==0?'联系人：':'收货人：'}}{{data.order_info.name}}
                </view>
                <view class="user-info-mobile flex-grow-1">
                    {{data.order_info.mobile}}
                </view>
            </view>
            <view v-if="data.order_info.is_offline==0">{{data.order_info.address}}</view>
        </view>
        <view class="order-address block flex-row" v-if="data.order_info.is_offline==2">
            <view class="flex-grow-1">
                <view class="flex-grow-1 block-row">门店名称：{{data.order_info.shop.name}}</view>
                <view class="flex-grow-1 block-row">联系电话：{{data.order_info.shop.mobile}}</view>
                <view class="flex-grow-1">门店地址：{{data.order_info.shop.address}}</view>
            </view>
            <view class="flex-grow-0 flex-y-center" v-if="data.order_info.shop.longitude">
                <text @tap="location" class="order-no-num-right flex-grow-0 flex-y-center flex-x-center">导航</text>
            </view>
        </view>
        <view class="order-no">
            <view class="order-no-num flex-row">
                <view class="order-no-num-left flex-grow-1">
                    订单编号：{{data.order_info.order_no}}
                </view>
                <view @tap="copyText" class="order-no-num-right flex-grow-0 flex-y-center flex-x-center" :data-text="data.order_info.order_no">
                    复制
                </view>
            </view>
            <view class="order-add-time">
                下单时间：{{data.order_info.addtime}}
            </view>
        </view>
        <view class="order-info">
            <view class="order-info-item flex-row">
                <view class="order-info-title flex-grow-1">
                    商品总额
                </view>
                <view class="order-info-val flex-grow-1">
                    {{data.order_info.integral}}积分
                    <block v-if="data.order_info.total_price>0">+ ¥ {{data.order_info.total_price}}</block>
                </view>
            </view>
            <view class="order-info-item flex-row">
                <view class="order-info-title flex-grow-1">
                    商品数量
                </view>
                <view class="order-info-val flex-grow-1">
                    {{data.order_info.detail.num}}
                </view>
            </view>
            <view class="order-info-item flex-row">
                <view class="order-info-title flex-grow-1">
                    运费
                </view>
                <view class="order-info-val flex-grow-1">
                    ¥ {{data.order_info.express_price}}
                </view>
            </view>
        </view>
        <view class="order-total-price">
            合计：
            <text style="color:#ff5c5c;">{{data.order_info.integral}}积分<block v-if="data.order_info.total_price>0">+ ¥ {{data.order_info.total_price}}</block>
            </text>
        </view>
        <view class="order-goods flex-row">
            <view class="flex-grow-0 goods-image">
                <image :src="data.order_info.detail.pic"></image>
            </view>
            <view class="flex-grow-1 flex-col">
                <view class="flex-grow-1">
                    <view class="goods-name">{{data.order_info.detail.goods_name}}</view>
                    <view class="attr-list flex-row">
                        <block v-for="(item,index) in data.order_info.detail.attr" :key="item.id">
                            {{item.attr_group_name}}:{{item.attr_name}}
                        </block>
                    </view>
                </view>
                <view class="flex-grow-0 flex-row order-price">
                    <view class="flex-grow-1 num">×{{data.order_info.detail.num}}</view>
                    <view class="flex-grow-0 price">{{data.order_info.integral}}积分
                        <block v-if="data.order_info.total_price>0">+ ¥ {{data.order_info.total_price}}</block>
                    </view>
                </view>
            </view>
        </view>
        <view class="order-footer flex-y-center flex-row" v-if="data.status!=1">
            <view @tap="clerkOrder" class="play-btn">
                    核销订单
                </view>
        </view>
			</view>
			<comp-footer v-bind="{data:data}"></comp-footer>
		</view>
	</view>
</template>

<script>var myVue = {};
	export default {
		data() {
			return {
				data: {},
			};
		},
		onLoad: function(e) {myVue = this;
        myVue.getApp.page.onLoad(this, e);
        var t = this;
        if (e.scene) {
            a = e.scene;
            t.setData({
                type: ""
            });
        } else if (e.type) {
            t.setData({
                type: e.type,
                status: 1
            });
            a = e.id;
        } else {
            a = e.id;
            t.setData({
                status: 1,
                type: ""
            });
        }
        if ("undefined" == typeof my) ; else if (t.setData({
            type: ""
        }), null !== app.query) {
            var o = app.query;
            app.query = null;
            var a = o.order_no;
        }
        a && (t.setData({
            order_id: a
        }), myVue.getApp.core.showLoading({
            title: "正在加载",
            mask: !0
        }), myVue.getApp.request({
            url: myVue.getApp.api.integral.clerk_order_details,
            data: {
                id: a,
                type: t.data.type
            },
            success: function(e) {
                0 == e.code ? t.setData({
                    order_info: e.data
                }) : t.getApp.core.showModal({
                    title: "提示",
                    content: e.msg,
                    showCancel: !1,
                    success: function(e) {
                        e.confirm && t.getApp.core.redirectTo({
                            url: "/pages/integral-mall/order/order?status=2"
                        });
                    }
                });
            },
            complete: function() {
                myVue.getApp.core.hideLoading();
            }
        }));
    },
    onReady: function(e) {
        myVue.getApp.page.onReady(this);
    },
    onShow: function(e) {
        myVue.getApp.page.onShow(this);
    },
    onHide: function(e) {
        myVue.getApp.page.onHide(this);
    },
    onUnload: function(e) {
        myVue.getApp.page.onUnload(this);
    },
    onPullDownRefresh: function(e) {
        myVue.getApp.page.onPullDownRefresh(this);
    },
    onReachBottom: function(e) {
        myVue.getApp.page.onReachBottom(this);
    },
    onShareAppMessage: function(e) {
        myVue.getApp.page.onShareAppMessage(this);
        var t = this, o = "/pages/pt/group/details?oid=" + t.data.order_info.order_id;
        return {
            title: t.data.order_info.goods_list[0].name,
            path: o,
            imageUrl: t.data.order_info.goods_list[0].goods_pic,
            success: function(e) {}
        };
    },
		methods: {
			clerkOrder: function(e) {
        var t = this;
        myVue.getApp.core.showModal({
            title: "提示",
            content: "是否确认核销？",
            success: function(e) {
                e.confirm ? (myVue.getApp.core.showLoading({
                    title: "正在加载"
                }), myVue.getApp.request({
                    url: myVue.getApp.api.integral.clerk,
                    data: {
                        order_id: t.data.order_id
                    },
                    success: function(e) {
                        0 == e.code ? t.getApp.core.showModal({
                            showCancel: !1,
                            content: e.msg,
                            confirmText: "确认",
                            success: function(e) {
                                e.confirm && t.getApp.core.redirectTo({
                                    url: "/pages/index/index"
                                });
                            }
                        }) : t.getApp.core.showModal({
                            title: "警告！",
                            showCancel: !1,
                            content: e.msg,
                            confirmText: "确认",
                            success: function(e) {
                                e.confirm && t.getApp.core.redirectTo({
                                    url: "/pages/index/index"
                                });
                            }
                        });
                    },
                    complete: function() {
                        t.getApp.core.hideLoading();
                    }
                })) : e.cancel;
            }
        });
    },
    location: function() {
        var e = this.data.order_info.shop;
        myVue.getApp.core.openLocation({
            latitude: parseFloat(e.latitude),
            longitude: parseFloat(e.longitude),
            address: e.address,
            name: e.name
        });
    },
    copyText: function(e) {
        var t = e.currentTarget.dataset.text;
        myVue.getApp.core.setClipboardData({
            data: t,
            success: function() {
                myVue.getApp.core.showToast({
                    title: "已复制"
                });
            }
        });
    }
		},
	}
</script>

<style scoped>
.order-detail-top {
    height: 140upx;
    background-image: url('');
    color: #ffffff;
    padding-left: 88upx;
    background-size: 100% 100%;
}

.order-status {
    font-size: 13pt;
    margin-bottom: 14upx;
}

.order-time {
    font-size: 10pt;
}

.user-info-mobile {
    text-align: right;
}

.order-address {
    background-color: #ffffff;
    padding: 32upx 24upx;
    font-size: 11pt;
    color: #353535;
}

.user-address-info {
    padding-top: 19upx;
}

.order-no {
    margin-top: 20upx;
    padding: 32upx 24upx;
    font-size: 11pt;
    color: #353535;
    background-color: #ffffff;
}

.order-no-num-right {
    text-align: right;
    width: 74upx;
    height: 44upx;
    border: 1upx solid #dddddd;
    border-radius: 5upx;
    font-size: 7pt;
    color: #666666;
}

.order-add-time {
    margin-top: 20upx;
}

.order-info-val {
    text-align: right;
}

.order-info {
    margin-top: 20upx;
    padding: 12upx 24upx 32upx 24upx;
    background-color: #ffffff;
    font-size: 11pt;
    color: #353535;
}

.order-info-item {
    padding-top: 20upx;
}

.order-total-price {
    border-top: 1upx solid #e2e2e2;
    background-color: #ffffff;
    line-height: 96upx;
    text-align: right;
    height: 96upx;
    padding: 0 24upx;
    color: #353535;
    font-size: 13pt;
}

.order-goods {
    margin-top: 20upx;
    background-color: #ffffff;
    padding: 0 24upx 30upx 24upx;
    color: #353535;
}

.goods-image image {
    width: 156upx;
    height: 156upx;
    margin-right: 26upx;
    margin-top: 30upx;
}

.goods-name {
    font-size: 11pt;
    margin-top: 32upx;
    line-height: 1;
}

.attr-list {
    font-size: 9pt;
    line-height: 1;
    margin-top: 12upx;
    margin-bottom: 5upx;
}

.order-price {
    font-size: 10pt;
}

.order-footer {
    height: 98upx;
    margin-top: 20upx;
    border-top: 1upx solid #e2e2e2;
    background-color: #ffffff;
    padding: 0 24upx;
    text-align: right;
    justify-content: flex-end;
}

.play-btn {
    height: 64upx;
    border: 1upx solid #ff5c5c!important;
    color: #ff5c5c;
    border-radius: 10upx;
    line-height: 64upx;
    text-align: center;
    padding: 0 20upx!important;
    margin: 0!important;
    background-color: transparent!important;
}

button::after {
    content: normal;
}

.express-info {
    padding: 20upx 24upx;
    background-color: #ffffff;
    font-size: 11pt;
    color: #353535;
    margin-bottom: 20upx;
}

.express-info-right image {
    width: 16upx;
    height: 26upx;
}

.express {
    margin-bottom: 20upx;
}

.block {
    margin-top: 20upx;
}

.block-row {
    padding-bottom: 20upx;
}
</style>
